<template>
  <el-dialog class="setting_dialog" v-model="show" :show-close="false" width="800" @open="handleOpen">
    <template #header="{ close, titleId, titleClass }">
      <div class="setting_dialog_header">
        <div :id="titleId" :class="titleClass" class="title">{{languageJson.setting.setting}}</div>
        <img
          src="@/assets/setting/close.png"
          style="width: 16px; height: 16px; cursor: pointer"
          @click="close"
          alt=""
        />
      </div>
      <div class="setting_bg"></div>
    </template>
    <div class="setting_dialog_content">
      <Menu />
      <List />
    </div>
  </el-dialog>
</template>

<script setup>
import Menu from './Menu.vue'
import List from './List.vue'
import { http } from '@/utils/http'
const languageJson = inject('languageJson')
const languageType = inject('languageType')
const show = defineModel({ type: Boolean })
import { useSettingStore } from './setting-store.js'

const userStore = useUserStore()
const settingtore = useSettingStore()

provide('SettingStore', {
  settingtore,
  state: settingtore.state,
})

const handleOpen = () => {
  console.log(settingtore.state.formData);
  settingtore.state.formData = userStore.settingData
  settingtore.gettimezone()
}
</script>

<style lang="scss" scoped>
</style>

<style>
.setting_dialog {
  height: 600px;
  border-radius: 0;
  padding: 0;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  background-color: #f4f5fe;
}

.setting_dialog .el-dialog__header {
  padding: 0;
}
.setting_dialog_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  height: 40px;
  position: relative;
  z-index: 2;
}
.setting_dialog_header .title {
  font-family: AlibabaPuHuiTi_2_85_;
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

.setting_dialog_content {
  margin: 0 12px 12px 12px;
  height: 548px;
  display: flex;
  position: relative;
  z-index: 2;
}
.setting_bg {
  width: 100%;
  height: 80px;
  background-image: url('@/assets/setting/bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 1;
  top: 0;
}
</style>
